<template>
  <div>
    <el-card>
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="#">问诊管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>预约上门问诊列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <el-row>
        <el-input class="search" v-model="queryInfo.query"></el-input><el-button type="primary" @click="getOrderList()">搜索</el-button>
      </el-row>
      <el-empty description="暂无数据" v-if="orderList.length==0"></el-empty>
      <el-table :data="orderList" stripe style="width: 100%" border v-if="orderList.length!=0">
        <el-table-column prop="name" label="姓名" width="80"> </el-table-column>
        <el-table-column prop="age" label="年龄" width="50"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="50"> </el-table-column>
        <el-table-column label="症状" width="400">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.symptom" :key="item.id">{{
              item
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="预约时间" width="200">
        </el-table-column>
        <el-table-column label="上门就诊时间" width="360">
          <template slot-scope="scope">
            <el-tag
              v-if="
                (scope.row.orderDate === null) | (scope.row.orderDate === '')
              "
              type="danger"
              >未处理</el-tag
            >
            <el-tag v-else type="success">{{ scope.row.orderDate }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="showEditDialog(scope.row._id)"
              >就诊时间及地址安排</el-button
            >
            <el-button type="primary" @click="deleteConfirm(scope.row._id)"
              >删除</el-button
            >
            <el-button
              type="info"
              size="mini"
              v-show="scope.row.orderDate !== null"
              >已添加至病人信息列表，可删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      title="填写上门就诊地址及时间"
      :visible.sync="editDialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="editForm" label-width="80px">
        <el-form-item label="就诊地址">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
        <el-form-item label="就诊时间">
          <el-date-picker
            v-model="editForm.orderDate"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderTimeConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      orderList: [],
      total: 0,
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      },
      editForm: {},
      FormRule: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'blur'
          }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          // { type: 'number', message: '必须为数值'}
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            min: 7,
            max: 11,
            message: '长度在 7 到 11 个字符',
            trigger: 'blur'
          }
          // { type: 'number', message: '必须为数值'}
        ],
        symptom: [
          { required: true, message: '请输入主要症状', trigger: 'blur' }
          // { min: 0, max: 100, message: '长度在 0 到 100 个字符', trigger: 'blur' }
        ]
      },
      editDialogVisible: false
    }
  },
  created () {
    this.getOrderList()
  },
  methods: {
    async getOrderList () {
      const doctorID = window.sessionStorage.getItem('doctorID')
      await this.$http
        .get('/api/order/orderList/' + doctorID, { params: this.queryInfo })
        .then((res) => {
          this.orderList = res.data.orderList
          this.total = res.data.total
        })
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getOrderList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getOrderList()
    },
    showEditDialog (id) {
      this.$http.get('/api/order/orderinfo/' + id).then((res) => {
        this.editForm = res.data.info
        console.log(this.editForm)
      })
      this.editDialogVisible = true
    },
    orderTimeConfirm () {
      this.$http
        .post('api/order/edit/' + this.editForm._id, this.editForm)
        .then((res) => {
          if (res.status !== 200) {
            this.$message.error('修改时间失败')
          }
          this.$message.success('预约就诊时间成功')
          const doctorID = window.sessionStorage.getItem('doctorID')
          this.$http
            .post('/api/profile/add/' + doctorID, this.editForm)
            .then((res) => {
              if (res.status !== 200) {
                return this.$message.error('添加病人信息失败')
              }
              const newInfo = {}
              newInfo.visitDate = this.editForm.orderDate
              newInfo.address = this.editForm.address
              this.$http
                .post('/user/myorder/edit/' + this.editForm._id, newInfo)
                .then((res) => {
                  if (res.data.status !== 200) { return this.$message.error('状态修改失败') }
                  this.$message.success('状态修改成功')
                })
              this.getOrderList()
            })
          this.editDialogVisible = false
        })
    },
    async deleteConfirm (id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该信息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消该操作')
      }
      this.$http.delete('/api/order/delete/' + id).then((res) => {
        if (res.status !== 200) {
          this.$message.error('删除信息失败')
        }
      })
      this.$message.success('删除成功')
      this.getOrderList()
    }
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 20px;
}
.el-tag {
  margin: 0 5px;
}
.el-button {
  margin-left: 10px;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
.search{
  width: 300px;
}
</style>
